<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link th:href="@{/mayioa/css/mayioa-ui.css}" rel="stylesheet"/>
<link th:href="@{/ajax/libs/datapicker/datepicker3.css}" rel="stylesheet"/>
<style>
	.displayBlock{
		display:block;
	}
	.displayNone{
		display:none;
	}
</style>
<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<form class="form-horizontal m" id="form-score-add">

			<div class="form-group">
				<label class="col-sm-3 control-label ">计划名称：</label>
				<div class="col-sm-8">
					<select id="scorePlanId" name="scorePlanId" class="form-control m-b" >
						<option th:each="plan : ${planList}" th:text="${plan['plan_cfg_name']}" th:value="${plan['plan_cfg_id']}"></option>
					</select>
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-3 control-label ">用户工号：</label>
				<div class="col-sm-8">
					<select id="scoreUserId" name ="scoreUserId" class="form-control m-b">
						<option v-for="(item,key) in userOption" :value="item.user_id" >{{item.user_name}}</option>
					</select>
				</div>
			</div>
			<div class="row" v-for="(item,key) in projectOption">
				<div class="form-group" style="margin-left:60px;"  >
					<label class="col-sm-2 control-label " style="margin-left:10px;">打分项目：</label>
					<div class="col-sm-3" style="width:160px;">
						<input class="form-control" type="text" :id="'scorePlanItem'+key"  :name="item.dId" v-model="item.dname"  readonly/>
					</div>
					<label class="col-sm-1 control-label " style="width:72px;margin-left:15px;">分数：</label>

					<div class="col-sm-2" style="width:185px;padding:0;"  :class="item.itemType!=3? 'displayBlock':'displayNone'">
						<input class="form-control" type="text" :id="'score'+key" :name="item.dname"/>
					</div>
					<div class="col-sm-2" style="width:185px;padding:0;"  :class="item.itemType!=3? 'displayNone':'displayBlock'" >
						<select :id="'score'+key" class="form-control m-b" th:with="type=${@dict.getType('plan_achievement_score')}">
							<option value="">请选择</option>
							<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
						</select>
					</div>
					<div class="col-sm-1" style="width: 73px; padding: 0;line-height: 34px;padding-left:5px;" v-if="item.itemType!=3">{{item.pScore}}/{{item.dscore}}</div>
					
				</div>
				<div class="form-group" style="margin-bottom:35px;">
						<label class="col-sm-3 control-label" style="margin-left:7px;">备注：</label>
						<div class="col-sm-8" style="width:504px;">
							<input class="form-control" type="text" :id="'reason'+key"  :name="item.dReason"  />
						</div>
				</div>
			</div>
			

			
		</form>
	</div>
	<div th:include="include::footer"></div>
	<script th:src="@{/ajax/libs/select/select2.js}"></script>
	<script th:src="@{/js/jquery-ui-1.10.4.min.js}"></script>
	<script th:src="@{/ajax/libs/iCheck/icheck.min.js}"></script>
	<script th:src="@{/ajax/libs//datapicker/bootstrap-datepicker.js}"></script>
	<script th:src="@{/ajax/libs/beautifyhtml/beautifyhtml.js}"></script>
	<script th:src="@{/js/vue.js}"></script>
	<script th:inline="javascript">
	window.scoreAdd=new Vue({
			el:"#form-score-add",
			data:{
				userOption:[],
				projectOption:[]
			},
			created:function(){
				
			},
			mounted:function(){
				this.planChange();
				this.planClass();
				this.formValidate();
			},
			methods: {
				formValidate: function(){
					var _this=this;
					var rule={};
					for(var i=0;i<_this.projectOption.length;i++){
						rule[_this.projectOption[i].dname]={
			        		number:true,
			        		max:_this.projectOption[i].dscore
			        	}
					}
					$("#form-score-add").validate({
			        	rules:rule
			        });
				},
				planClass: function(){
					var _this=this;
					var scorePlan= document.getElementById("scorePlanId");
					scorePlan.onchange = function(){
						_this.planChange();
					};
				},
				planChange: function(){
					var _this=this;
					$.ajax({
		        		cache : false,
		        		type : "GET",
		        		url : ctx + "score/score/getSignPlanUsers",
		        		data : {
		        			"scorePlanId":$("#scorePlanId").val(),
		        		}, 
		        		async : false,
		        		error : function(request) {
		        			$.modal.alertError("系统错误");
		        		},
		        		success : function(data) {
							$("#scoreUserId").empty();
							var hml_str='';
							for(var i=0;i<data.length;i++){
								hml_str+='<option  value="'+data[i].user_id+'" >'+data[i].user_name+'</option>';
							}
							$("#scoreUserId").append(hml_str);
		        			// _this.userOption=data;
							_this.projectItem();
		        		}
		        	});
				},
				projectItem: function(){
					var _this=this;
					$.ajax({
		        		cache : true,
		        		type : "GET",
		        		url : ctx + "score/score/getPlanDetailSelect",
		        		data : {
		        			"scorePlanId": $("#scorePlanId").val(),
		        		},
		        		async : false,
		        		error : function(request) {
		        			$.modal.alertError("系统错误");
		        		},
		        		success : function(data) {
		        			_this.projectOption=data;
							
		        		}
		        	});
				},
		        add: function () {
		        	var _this=this;
					var data={
						"scoreUserId":$("#scoreUserId").val(),
		        		"scorePlanId": $("#scorePlanId").val()
					}
					var planItemIds ="";
					var planItemScores ="";
					var planItemsReasons="";
					for(var i=0;i<_this.projectOption.length;i++){
						if($("#score"+i).val()!=""){
							planItemIds =planItemIds+","+_this.projectOption[i].dId;

							planItemScores = planItemScores+","+$("#score"+i).val();
							planItemsReasons+=","+$("#reason"+i).val();
							
						}
					}
					data["planItemIds"] = planItemIds ;
					data["planItemScores"] = planItemScores ;
					data["planItemsReasons"] = planItemsReasons ;
		        	$.ajax({
		        		cache : true,
		        		type : "POST",
		        		url : ctx + "score/score/add",
		        		data : data,
		        		async : false,
		        		error : function(request) {
		        			$.modal.alertError("系统错误");
		        		},
		        		success : function(data) {
		        			$.operate.saveSuccess(data);
		        		}
		        	});
		        }
			}
		})
		
        function submitHandler() {
	        if ($.validate.form()) {
	        	window.scoreAdd.add();
	        }
	    }

    </script>
</body>
</html>
